<template>
	<view class="container">
		<desc-wrapper :title="title" :desc="desc"></desc-wrapper>
		<z-card>
			<view class="card-content-item">
				<text class="card-content-label_left">男方</text>
				<view class="card-content_right">
					<view class="input-name-box">
						<input class="input-item" v-model="form.male_name" type="text" placeholder="请输入男方姓名" />
					</view>
				</view>
			</view>

			<view class="card-content-item">
				<text class="card-content-label_left">男方</text>
				<view class="card-content_right">
					<uni-data-checkbox selectedColor="#4e6542" selectedTextColor="#333" v-model="form.male_type"
						:localdata="calendar" @change="malelunarChange"></uni-data-checkbox>
				</view>
			</view>
			<view class="card-content-item">
				<text class="card-content-label_left">男方</text>
				<view class="card-content_right flex-row flex-wrap flex-1">
					<uni-data-select class="year" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;" :clear="false"
						v-model="form.male_year" :localdata="yearData" @change="yearChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;" :clear="false"
						v-model="form.male_month" :localdata="monthData" @change="monthChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;" :clear="false"
						v-model="form.male_day" :localdata="dayData" @change="dayChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator  :clear="false" v-model="form.male_hours" style="margin-bottom: 10rpx;"
						:localdata="hourData" @change="hourChange"></uni-data-select>
				</view>
			</view>

			<!-- 女方 -->
			<view class="card-content-item">
				<text class="card-content-label_left">女方</text>
				<view class="card-content_right">
					<view class="input-name-box">
						<input class="input-item" v-model="form.female_name" type="text" placeholder="请输入女方姓名" />
					</view>
				</view>
			</view>

			<view class="card-content-item">
				<text class="card-content-label_left">女方</text>
				<view class="card-content_right">
					<uni-data-checkbox selectedColor="#4e6542" selectedTextColor="#333" v-model="form.female_type"
						:localdata="calendar" @change="femalelunarChange"></uni-data-checkbox>
				</view>
			</view>
			<view class="card-content-item">
				<text class="card-content-label_left">女方</text>
				<view class="card-content_right flex-row flex-wrap flex-1">
					<uni-data-select class="year" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;" :clear="false"
						v-model="form.female_year" :localdata="yearData" @change="yearChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;" :clear="false"
						v-model="form.female_month" :localdata="monthData" @change="monthChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator style="margin-right: 10rpx;margin-bottom: 10rpx;1" :clear="false"
						v-model="form.female_day" :localdata="dayData" @change="dayChange"></uni-data-select>
					<uni-data-select class="time" isCustomIndicator  :clear="false" v-model="form.female_hours" style="margin-bottom: 10rpx;"
						:localdata="hourData" @change="hourChange"></uni-data-select>
				</view>
			</view>
		</z-card>
		<view class="bottom-btns">
			<view class="start-btn" @click="onClick_1">
				<text class="">开始合婚鉴定</text>
			</view>
			<!-- <view class="contact-btn"></view> -->
		</view>
		<!-- <u-tabbar :value="value1" @change="change1" inactive-color="#7C8491" activeColor="#275515" :fixed="true"
			:placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item v-for="(item, idx) in tabList" :text="item.labelText">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconPath"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '八字合婚',
				desc: '测试方法：输入男方和女方的信息，点击立即合婚，并查看测算结果，并查看合婚结果，请自行体会其中的指示。',
				value1: 2,
				tabList: [{
						labelText: '首页',
						url: '/pages/tabbar/home',
						iconPath: '/static/image/tabbar/tabbar1.png',
						activeIconPath: '/static/image/tabbar/activetabbar1.png'
					},
					{
						labelText: '论坛',
						url: '/pages/tabbar/forum',
						iconPath: '/static/image/tabbar/tabbar2.png',
						activeIconPath: '/static/image/tabbar/activetabbar2.png'

						// activeIconPath: '/static/image/tabbar/activetabbar2.png'
					},
					{
						labelText: '客服',
						url: '/pages/tabbar/service',
						iconPath: '/static/image/tabbar/tabbar3.png',
						activeIconPath: '/static/image/tabbar/activetabbar3.png'
					},
					{
						labelText: '我的',
						url: '/pages/tabbar/mine',
						iconPath: '/static/image/tabbar/tabbar4@3x.png',
						activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
					}
				],
				form: {
					api_key: 'FsF1CsVevk3N17w7oBkSydfSk',
					male_name: '',
					male_type: 0,
					male_year: Number(new Date().getFullYear()),
					male_month: Number(new Date().getMonth()) + 1,
					male_day: Number(new Date().getDate()),
					male_hours: Number(new Date().getHours()),
					male_minute: Number(new Date().getMinutes()),
					female_name: '',
					female_type: 0,
					female_year: Number(new Date().getFullYear()),
					female_month: Number(new Date().getMonth()) + 1,
					female_day: Number(new Date().getDate()),
					female_hours: Number(new Date().getHours()),
					female_minute: Number(new Date().getMinutes())
				},
				calendar: [{
						value: 0,
						text: '农历'
					},
					{
						value: 1,
						text: '公历'
					}
				],
				yearData: [],
				monthData: [],
				dayData: [],
				hourData: [],
				fenData: []
			}
		},
		onLoad() {
			for (let i = 1910; i <= 2023; i++) {
				this.yearData.push({
					value: i,
					text: i + '年'
				})
			}

			for (let i = 1; i <= 12; i++) {
				this.monthData.push({
					value: i,
					text: i + '月'
				})
			}

			for (let i = 1; i <= 30; i++) {
				this.dayData.push({
					value: i,
					text: i + '日'
				})
			}
			for (let i = 0; i <= 23; i++) {
				this.hourData.push({
					value: i,
					text: i + '时'
				})
			}
			for (let i = 0; i <= 59; i++) {
				this.fenData.push({
					value: i,
					text: i + '分'
				})
			}
		},
		methods: {
			change1(e) {
				console.log(e)
				uni.switchTab({
					url: this.tabList[e].url
				})
			},
			yearChange(e) {},
			monthChange(e) {},
			dayChange(e) {},
			hourChange(e) {},
			fenChange(e) {},
			//更改男方农历
			malelunarChange(e) {
				this.form.male_type = e.detail.value
				console.log(e)
			},
			//更改女方农历
			femalelunarChange(e) {
				this.form.female_type = e.detail.value
				console.log(e)
			},
			onClick_1() {
				let that = this;
				if (this.form.male_name == "") {
					uni.$u.toast("请输入男方姓名")
					return
				}
				if (this.form.female_name == "") {
					uni.$u.toast("请输入女方姓名")
					return
				}
				uni.navigateTo({
					url: `/pages/marriage/detail?params=${JSON.stringify(this.form)}`
				})
			}
		}
	}
</script>
<style lang="scss">
 ::v-deep .year .uni-select{
			width: 165rpx;
	    }
::v-deep .time .uni-select{
		width: 115rpx;
		}
</style>